<template>
  <div o-Container>
    <h1>{{ octopus.username }}</h1>
    <div>一般VUE项目分为首页、登陆页、内页，3个大组件，内部分支为无数个细小组件。</div>
    <div>参数：{{$route.params.id}}={{$route.params.key}}={{$route.query.name}}</div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld999999999', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus
      }
    },
    created: function () {
      // this.oData 等价于 this.octopus
      this.oData.tips.debug("MarcoTest.vue执行了created事件。");
    },
    mounted: function () {
      this.octopus.tips.debug("MarcoTest.vue执行了mounted事件。");
    },
    beforeUpdate: function () {
      this.octopus.tips.debug("MarcoTest.vue执行了beforeUpdate事件。");
    },
    updated: function () {
      this.octopus.tips.debug("MarcoTest.vue执行了updated事件。");
    },
    activated: function () {
      this.octopus.tips.debug("MarcoTest.vue执行了activated事件。");
    },
    deactivated: function () {
      this.octopus.tips.debug("MarcoTest.vue执行了deactivated事件。");
    },
    props: ["oData"]
  }
</script>

